<template>
	<view>
		<!-- 结算区域  -->
		<view class="settle-box">
			<!-- 全选 -->
			<view class="select-all" @click="selectAll">
				<!-- 单选按钮区域 -->
				<radio :checked="isSelectAll" color="#d81e06" value="" />
				<text>全选</text>
			</view>
			<!-- 合计 -->
			<view class="total">
				<text>合计:</text>
				<view class="amount">￥{{ totalPrice }}</view>
			</view>
			<!-- 结算按钮 -->
			<view class="settlement" @click="settlement">结算({{ settleTotal }})</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
	name: 'my-settle',
	data() {
		return {};
	},
	methods: {
		// 映射
		...mapMutations('m_cart', ['selectAllOrInvert']),
		...mapMutations('m_user', ['saveRedirect']),
		// 全选与反选
		selectAll() {
			this.selectAllOrInvert(!this.isSelectAll);
		},
		// 结算
		settlement() {
			// 判断是否勾选商品？
			if (this.settleTotal <= 0) return uni.$showMsg('请勾选商品！');
			// 判断是否选择地址？
			if (Object.keys(this.address).length === 0) return uni.$showMsg('请选择地址！');
			// 判断token是否为空？
			if (!this.token && this.token === '') {
				this.redirectLogin();
			} else {
				// 支付操作
				this.pay();
			}
		},
		// 未登录 重定向到登录页面
		redirectLogin() {
			const that = this;
			// 消息提示框
			uni.showToast({
				title: '请先登录后结算！',
				icon: 'none',
				mask: true,
				duration: 2000,
				success(res) {
					if (res.errMsg === 'showToast:ok') {
						// 定时器 2.5s后执行
						setTimeout(() => {
							// 跳转至登录页面
							uni.switchTab({
								url: '/pages/user/index',
								success(res) {
									if (res.errMsg === 'switchTab:ok') {
										// 保存重定向信息
										that.saveRedirect({
											type: 'switchTab',
											from: '/pages/cart/index'
										});
									}
								}
							});
						}, 2500);
					}
				}
			});
		},
		// 支付操作
		async pay() {
			// 生成订单参数
			const param = {
				order_price: 0.01,
				consignee_addr: this.addrStr,
				goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
			};
			// 调用生成订单接口
			const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', param);
			if (res.meta.status !== 200) return uni.$showMsg('创建失败');
			// 获取订单号
			const orderNo = res.message.order_number;

			// 调用唤起支付接口
			const { data: res1 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNo });
			if (res1.meta.status !== 200) return uni.$showMsg('唤起失败');
			// 获取预支付信息
			const payInfo = res1.message.pay;

			// 支付
			const that = this;
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: payInfo.timeStamp,
				nonceStr: payInfo.nonceStr,
				package: payInfo.package,
				signType: payInfo.signType,
				paySign: payInfo.paySign,
				success: function(res) {
					that.checkOrderStatus(orderNo);
				},
				fail: function(err) {
					return uni.$showMsg('无支付权限');
				}
			});
		},
		// 查询订单状态
		async checkOrderStatus(orderNo) {
			// 调用查看订单支付状态接口
			const { data: res } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNo });
			if (res.meta.status !== 200) return uni.$showMsg(res.meta.msg);
			uni.showToast({
				title: '支付成功',
				icon: 'success'
			});
		}
	},
	computed: {
		// 映射
		...mapGetters('m_cart', ['settleTotal', 'cartTotal', 'totalPrice']),
		...mapGetters('m_user', ['addrStr']),
		...mapState('m_user', ['address', 'token']),
		...mapState('m_cart', ['cart']),
		// 是否全选
		isSelectAll() {
			// 购物车总数量 与 已勾选数量比较
			return this.cartTotal === this.settleTotal;
		}
	}
};
</script>

<style lang="scss">
@mixin a {
	display: flex;
	justify-content: center;
	align-items: center;
}
// 结算区域
.settle-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	border-top: 1px solid #efefef;
	display: flex;
	font-size: 13px;
	// 全选
	.select-all {
		@include a;
		flex: 20%;
	}
	// 合计
	.total {
		@include a;
		flex: 50%;
		.amount {
			color: #d81e06;
			font-size: 15px;
		}
	}
	// 结算;;
	.settlement {
		@include a;
		flex: 30%;
		background-color: #d81e06;
		color: #ffffff;
	}
}
</style>
